<template>
  <div style="width:100%;height:95%;min-width: 350px;" :id="visite_id"></div>
</template>

<script>
  import echarts from 'echarts';
  import bmap from 'echarts/extension/bmap/bmap';

  export default {
    name: 'echartsheatmap',
    props: ['DataArr', 'visite_volume_id', 'xDataTitle', 'div_width', 'color', 'rotate45'],
    data () {
      return {
        DataList: [],
        visite_id: '',
        title: '',
        div_w: 350,
        default_color: '#2196F3',
      };
    },
    created: function () {
      var _this = this;
      _this.DataList = _this.DataArr;
      _this.visite_id = 'id_' + _this.visite_volume_id;
      _this.title = _this.xDataTitle;
      _this.div_w = _this.div_width ? _this.div_width : _this.div_w;
      _this.default_color = _this.color ? _this.color : _this.default_color;
      _this.init();
    },
    watch: {
      'DataArr': function () {
        var _this = this;
        if (_this.DataArr && _this.DataArr.length > 0) {
          _this.DataList = _this.DataArr;
          _this.visite_id = 'id_' + _this.visite_volume_id;
          _this.title = _this.xDataTitle;
          _this.div_w = _this.div_width ? _this.div_width : _this.div_w;
          _this.init();
        }
      }
    },
    mounted () {
    },
    methods: {
      init: function () {
        var _this = this;
        this.$nextTick(() => {
          if (_this.div_w > 350) {
            $('#' + _this.visite_id).css({"width": _this.div_w + "px"});
            $('#' + _this.visite_id).css({"minWidth": _this.div_w + "px"});
          }
          var visite_id = _this.visite_id;
          let myChart = echarts.init(document.getElementById(visite_id));

          var points = [].concat.apply([], _this.DataList.map(function (track) {
            return track.map(function (seg) {
              return seg.coord.concat([1]);
            });
          }));
          const option = {
            animation: false,
            bmap: {
              center: [117.0647533475, 36.6905721269],//36.6905721269,117.0647533475
              zoom: 16,
              roam: true
            },
            visualMap: {
              show: false,
              top: 'top',
              min: 0,
              max: 5,
              seriesIndex: 0,
              calculable: true,
              inRange: {
//                color: ['blue', 'blue', 'green', 'yellow', 'red']
                color: ['#00695C', '#00695C', '#f00', '#f00', '#f00']
              }
            },
            series: [{
              type: 'heatmap',
              coordinateSystem: 'bmap',
              data: points,
              pointSize: 5,
              blurSize: 6
            }]
          };

          myChart.setOption(option);

          // 添加百度地图插件
          var bmap = myChart.getModel().getComponent('bmap').getBMap();
          bmap.addControl(new BMap.NavigationControl());
          bmap.enableScrollWheelZoom(false); //鼠标滚轮缩放

          window.addEventListener('resize', function () {
            myChart.resize();
          });
        });
      },
    },
  };
</script>
